<template>
    <div class="messagePostData">
        <el-row class="form">
            <el-col :span="22">
                <el-form :inline="true">
                    <el-form-item label="任务名称">
                        <el-input v-model="search.name" placeholder="根据任务名称模糊搜索" :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="投递号码">
                        <el-input v-model="search.target" placeholder="请输入手机号或邮箱" :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item label="投递时间">
                        <el-date-picker
                            v-model="search.time"
                            type="daterange"
                            @change="onSearchTimeChange"
                            value-format="yyyy-MM-dd"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="投递类型">
                        <el-select v-model="search.type" :clearable="true">
                            <el-option label="邮件" value="1"></el-option>
                            <el-option label="短信" value="2"></el-option>
                            <el-option label="邮短" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投递状态">
                        <el-select v-model="search.status" :clearable="true">
                            <el-option label="投递成功" value="1"></el-option>
                            <el-option label="投递失败" value="2"></el-option>
                        </el-select>
                        <el-button size="medium" type="primary" @click="query(1)">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="2">
                <el-button class="float-right" size="medium" type="success" @click="exportExcel">导出</el-button>
            </el-col>
        </el-row>
        <el-row class="data">
            <el-table :data="page.list"
                      v-loading="page.loading"
                      stripe border
                      style="width: 100%">
                <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="投递任务"></el-table-column>
                <el-table-column prop="phoneNum" label="投递号码" width="200" align="center"></el-table-column>
                <el-table-column prop="time" label="投递时间" width="160" align="center"></el-table-column>
                <el-table-column prop="type" label="投递类型" width="80" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type===1">邮件</span>
                        <span v-if="scope.row.type===2">短信</span>
                        <span v-if="scope.row.type===3">邮短</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="投递状态" width="100" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status===1" style="color: #67C23A">投递成功</span>
                        <span v-if="scope.row.status===2" style="color: #F56C6C">投递失败</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
                <el-table-column prop="operator" label="操作" width="120" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="info" @click="showRemarkDialog(scope.row)">备注</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="page.totalCount"
                :page-size='page.size'
                :current-page.sync="page.page"
                @current-change="query(null)">
            </el-pagination>
        </el-row>
        <el-dialog title="备注" :visible.sync="dialog.show">
            <el-input type="textarea" :autosize="{ minRows: 4}" placeholder="请输入备注内容" v-model="dialog.remark">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="saveRemark">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "messagePostData",
        data() {
            return {
                search: {
                    name: '',
                    time: [],
                    timeStart: '',
                    timeEnd: '',
                    target: '',
                    type: '',
                    status: '',
                    loading: true
                },
                page: {
                    page: 1,
                    size: 10,
                    totalCount: 0,
                    totalPage: 0,
                    list: [],
                    loading: true
                },
                loading: false,
                activityMap: {1: "asd"},
                list: [],
                dialog: {
                    show: false,
                    id: '',
                    remark: ''
                },
            }
        }, mounted() {
            this.query();
        },
        methods: {
            query(page) {
                let _this = this;
                _this.page.page = page || _this.page.page;
                _this.page.loading = true;
                _this.axios({
                    url: '/activityConsole/messagePost/record/list',
                    params: Object.assign({
                        page: _this.page.page,
                        size: _this.page.size
                    }, _this.search)
                }).then(res => {
                    _this.page.list = res.data.data.content;
                    _this.page.totalCount = res.data.data.totalCount;
                    _this.page.totalPage = res.data.data.totalPage;
                    _this.page.loading = false;
                }).catch(e => {
                    _this.page.loading = false;
                    console.log(e);
                })
            },
            onSearchTimeChange() {
                if (this.search.time) {
                    this.search.timeStart = this.search.time[0];
                    this.search.timeEnd = this.search.time[1];
                } else {
                    this.search.timeStart = '';
                    this.search.timeEnd = '';
                }
            },
            showRemarkDialog(row) {
                this.dialog.id = row.id;
                this.dialog.remark = row.remark;
                this.dialog.show = true;
            },
            saveRemark() {
                let _this = this;
                _this.axios({
                    url: '/activityConsole/messagePost/record/remark',
                    method: 'post',
                    data: {
                        id: this.dialog.id,
                        remark: this.dialog.remark
                    }
                }).then(res => {
                    if (res.data.status === '200') {
                        _this.$message.success(res.data.description);
                        this.dialog.show = false;
                        _this.query(1);
                    } else {
                        _this.$message.warning(res.data.description);
                    }
                }).catch(e => {
                    _this.$message.warning("保存失败");
                    console.log(e);
                });
            },
            exportExcel() {
                let params = '';
                for (let item in this.search) {
                    params += `${item}=${this.search[item]}&`;
                }
                location.href = '/activityConsole/messagePost/record/export?' + params;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .messagePostData {
        .form,
        .data,
        .el-pagination {
            margin: 30px 30px 0;
        }
        .form {
            .el-form-item {
                margin-bottom: 10px;
                .el-button {
                    margin-left: 10px;
                }
            }
            .el-button {
                padding: 10px 20px;
            }
        }
        .el-pagination {
            text-align: center;
        }
        .float-right {
            float: right;
        }
    }
</style>
